<template>
  <q-page>
    <q-toolbar class="bg-white text-black shadow-6">


      <q-space />
      <q-btn outline dense color="secondary" class="q-mr-sm q-px-sm" @click="handleRDP">远程控制</q-btn>
      <q-btn flat round  icon="refresh" @click="handleRefresh"  />
      <q-btn
      class="q-mr-sm"
      round
      flat
      @click="$q.fullscreen.toggle()"
      :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
    />

    </q-toolbar>
    <div class="row q-pa-sm">
      <div class="col-6  col-md-3 col-lg-3  q-pa-sm" v-for="item, index in computerList" :key="index">
        <q-card>
          <q-item>
            <q-item-section avatar>
              <q-avatar>
                <img src="~assets/img/switch.png">
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label class="text-bold text-right">{{ item.mcuname }} </q-item-label>
              <q-item-label caption class="text-right">
                <span class="q-mt-sm">{{ item.isonline == 1 ? '在线' : '离线' }}</span>

                <q-badge v-if="item.remark" class="q-ml-sm q-mt-sm" outline color="primary">{{ item.remark }}</q-badge>
              </q-item-label>
            </q-item-section>
          </q-item>

          <q-separator />
          <q-card-section>
            <div class="text-caption">
              电脑状态：{{ item.datapoint.status == 1 ? '开机' : '关机' }}
            </div>
            <div class="row justify-end items-center q-my-sm">
              <q-icon name="mdi-power-standby" :color="item.datapoint.status == 1 ? 'primary' : ''"></q-icon>
              <q-toggle color="primary" @input="handleSwitch(item)" :false-value="0" :true-value="1"
                v-model="item.datapoint.status" />
              <q-btn dense color="primary" :loading="item.isMonitorLoad" push round @click="handleComputerRdp(item)"
                class="q-pa-xs" size="12px" icon="mdi-monitor"></q-btn>

            </div>

          </q-card-section>

        </q-card>
      </div>
      <q-inner-loading :showing="isLoad" class="bg-grey-2">
        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
        数据加载中……
      </q-inner-loading>

    </div>


  </q-page>
</template>

<script>
import { loadComputers, setComputerData, getComputerRdpUrl } from "assets/api/app"
export default {
  // name: 'PageName',
  data() {
    return {
      computerList: [],
      isLoad: true
    }
  },


  mounted() {
    this.handleLoadComputers()
  },
  methods: {
    handleRDP() {
      window.open("http://rd.yfyh.cc", '__blank')
    },
    handleComputerRdp(item) {
      if (item.datapoint.status == 1) {
        const dialog = this.$q.dialog({
        message: '请求远程桌面中,请稍等...',
        progress: true, // we enable default settings
        persistent: true, // we want the user to not be able to close it
        ok: false // we want the user to not be able to close it
      })


        let reqdata = {
          mcuname: item.mcuname
        }
        console.log(this.computerList);
        getComputerRdpUrl(reqdata).then(res => {

          dialog.hide()
          let data = res.data;
          if (data.code == 1) {
             window.open(data.url, '__blank')
          } else {
            this.$message.error("获取远程控制链接失败!")
          }
        })
      } else {
        this.$message.warn("请先开启电脑,并等待约1分钟后再尝试远程连接!")
      }

    },

    handleRefresh() {
      this.isLoad = true
      this.handleLoadComputers()
    },
    handleLoadComputers() {
      loadComputers().then(res => {
        this.isLoad = false
        if (res.data.code == 1) {

          let data = res.data.dataRes;
          let list = [];
          data.sort(function (a, b) {
            return parseInt(a.mcuname.replace('YFYH', '')) - parseInt(b.mcuname.replace('YFYH', ''));
          }).forEach(i => {
            if (i.mcuname == "YFYH01") {
              i.remark = "渲染主机"
            }
            if (i.mcuname == "YFYH02") {
              i.remark = "服务器"
            }
            if (i.mcuname == "YFYH03") {
              i.remark = "剪辑"
            }
            if (i.mcuname == "YFYH04") {
              i.remark = "剪辑"
            }
            // if(i.datapoint.status==0){
            //   i.isOpen = false
            // }else{
            //   i.isOpen = true
            // }
            list.push(i)
          })
          console.log(list);
          this.computerList = list

        }
      })
    },

    handleSwitch(item) {
      console.log(item.datapoint.status);
      let msg = "关机"
      if (item.datapoint.status == 1) {

        msg = "开机"
      }
      setComputerData({
        mcuid: item.mcuid,
        status: item.datapoint.status
      }).then(res => {
        console.log(res.data);
        let data = res.data.dataRes;
        if (data.resultCode == 0) {
          this.$message.success(msg + '操作执行成功!')
        } else {
          this.$message.error(msg + '操作执行失败!')
          this.handleLoadComputers()
        }
      })

      // if (item.datapoint.status == 1) {
      //   label = '关闭'
      // } else {
      //   label = '打开'
      // }
      // this.$q.dialog({
      //   title: '确认',
      //   message: '是否要' + label + '电脑：' + item.mcuname + "?",
      //   cancel: true,
      //   persistent: true
      // }).onOk(() => {
      //   // console.log('>>>> OK')
      // }).onOk(() => {
      //   // console.log('>>>> second OK catcher')
      // }).onCancel(() => {
      //   // console.log('>>>> Cancel')
      // }).onDismiss(() => {
      //   // console.log('I am triggered on both OK and Cancel')
      // })
    }
  }
}
</script>
